<template>
	<div>
		<h1>css过度动画</h1>
		<p>transition组件会为嵌套元素自动添加class，可用于做css过度动画</p>

		<button v-on:click="show = !show">transition 组件自带样式</button>
		<transition name="fade2">
			<p v-if="show">hello,看我渐渐地消失。</p>
		</transition>
		<br />
		<br />
		<br />

		<button @click="JSshow = !JSshow">JavaScript 钩子 改变</button>
		<transition name="fade" :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
			<p v-if="JSshow">JavaScript 钩子</p>
		</transition>
	</div>
</template>

<script>
export default {
	data() {
		return {
			JSshow: true,
			show: false
		};
	},
	methods: {
		beforeEnter: function(el) {
			el.style.opacity = 0;
			el.style.transformOrigin = "left";
		},
		enter: function(el, done) {
			Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
			Velocity(el, { fontSize: "1em" }, { complete: done });
		},
		leave: function(el, done) {
			Velocity(
				el,
				{ translateX: "15px", rotateZ: "50deg" },
				{ duration: 600 }
			);
			Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
			Velocity(
				el,
				{
					rotateZ: "45deg",
					translateY: "30px",
					translateX: "30px",
					opacity: 0
				},
				{ complete: done }
			);
		}
	}
};
</script>
<style>
/* 定义过度动画 */
.fade2-enter-active,
.fade2-leave-active {
	transition: opacity 7s;
}
.fade2-enter,
.fade2-leave-to {
	opacity: 0;
}
</style>

